<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import CampCard from './campCard.vue';
import { getCampMeta } from '@/api/PersonalSpace/trainingCamp'

// 训练营信息
interface CampInfo {
  campId: string; // 训练营ID
  campName: string; // 训练营名称
  organizerInfo: string; // 举办方信息
  coverImage: string; // 封面图片，可能为空
  tags: string; // 标签信息
  startTime: string; // 开始时间，ISO 格式的时间字符串
  endTime: string; // 结束时间，ISO 格式的时间字符串
}

// 训练营列表状态
const trainings = ref<CampInfo[]>([]);

// 定义 `loadCampInfo` 函数
const loadCampInfo = (campData: CampInfo[]) => {
  // 将 `campData` 映射到 `trainings` 中
  trainings.value = campData.map(camp => ({
    campId: camp.campId,
    campName: camp.campName,
    organizerInfo: camp.organizerInfo,
    coverImage: camp.coverImage ?? 'https://via.placeholder.com/150', // 如果 `coverImage` 为 null，则设置默认图片
    tags: camp.tags,
    startTime: camp.startTime,
    endTime: camp.endTime,
  }));
};

// 获取训练营信息函数，添加一个 searchText 参数用于搜索内容
const fetchCampMeta = async (searchText: string) => {
  try {
    // 调用 getCampMeta 函数，并将 searchText 传递给它
    const response: CampInfo[] = await getCampMeta(searchText);
    loadCampInfo(response); // 调用 `loadCampInfo` 来处理数据
  }
  catch (error) {
    console.error("CampList.vue获取训练营信息失败: ", error);
  }
};

onMounted(() => {
  fetchCampMeta('');
});

// 表格列定义，新增图片列
const columns = [
  {
    title: '训练营信息',
    key: 'campInfo',
    align: 'center',
  },
];

// 搜索框输入绑定
const searchQuery = ref('');
// 处理搜索的函数
const handleSearch = () => {
  fetchCampMeta(searchQuery.value);
};
</script>

<template>
  <div class="content-header">
    <!-- 绑定搜索框的输入内容 -->
    <a-input v-model:value="searchQuery" placeholder="搜索" class="search-input" />

    <!-- 搜索按钮绑定点击事件，触发 handleSearch 函数 -->
    <a-button type="primary" class="search-button" @click="handleSearch">
      搜索
    </a-button>
  </div>
  <a-layout class="content-layout">
    <a-table :columns="columns" :data-source="trainings" :pagination="{ pageSize: 10 }" row-key="campId" :show-header="false">
      <!-- 使用 v-slot:bodyCell 插槽自定义 CampCard 的渲染 -->
      <template #bodyCell="{ column, record }">
        <!-- 根据 column.key 判断是否渲染自定义内容 -->
        <CampCard
          v-if="column.key === 'campInfo'"
          :camp-id="record.campId"
          :camp-name="record.campName"
          :tags="record.tags"
          :cover-image="record.coverImage"
          :organizer-info="record.organizerInfo"
          :start-time="record.startTime"
          :end-time="record.endTime"
        />
      </template>
    </a-table>
  </a-layout>
</template>

<style scoped lang="scss">
.content-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  width: 100%;
  flex-wrap: wrap; // 支持多行显示
}
.search-input,
.search-button {
  height: 2.5rem; // 设定统一的高度
  font-size: 1rem;
  margin-top: 1rem;
}
.search-input {
  width: 70%;
  max-width: 20em;
}

.search-button {
  width: 100%;
  max-width: 5rem;
}

.content-layout {
  width: 100%;
  margin-bottom: 1.5rem;
}
</style>
